<template>
    <view class="page">
        <view class="padding_box">
            <view class="menu_bar_box">
                <view class="mine_item_box u-flex u-col-center u-row-between">
                    <view class="childre_name">{{ childrenData.childrenName }}</view>
                </view>
                <view class="mine_item_box u-flex u-col-center u-row-between">
                    <view class="menu_title">头像</view>
                    <image class="item_img"
                           :src="!childrenData.gender ? '/static/images/mine/coommon_icon_boy01@2x.png' : '/static/images/mine/coommon_icon_girl01@2x.png'"
                           mode="" />
                </view>
                <view class="mine_item_box u-flex u-col-center u-row-between">
                    <view class="menu_title">学校</view>
                    <view class="u-flex">
                        <view class="text_999">{{ childrenData.schoolName }}</view>
                        <!-- <image class="more_img"
                               src="/static/images/mine/mine_more_hui@2x.png"
                               mode="" /> -->
                    </view>
                </view>
                <view class="mine_item_box u-flex u-col-center u-row-between">
                    <view class="menu_title">年级</view>
                    <view class="text_999">{{ childrenData.childrenClass }}</view>
                </view>
            </view>
        </view>
        <view class="footer_box safe-area-inset-bottom">
            <u-button type="primary"
                      @click="switchChildren"
                      :disabled="childrenData.defStatus"
                      :customStyle="customStyle"
                      :ripple="true"
                      shape="circle"> {{ childrenData.defStatus ?'使用中':'使用TA' }} </u-button>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            customStyle: {
                height: '80rpx',
                background: 'linear-gradient(154deg, #7CC3F2 0%, #2979FF 100%)',
                borderRadius: '40rpx',
            },
            childrenData: {}
        }
    },
    onLoad(opt) {
        this.childrenData = opt.childrenData && JSON.parse(opt.childrenData)
        console.log('>>>>>>>>>>>>>>>', this.childrenData)
    },
    methods: {
        switchChildren() {
            this.$api.switchCurrentChildren({ id: this.childrenData.childrenId }, res => {
                if (res.code == 0) {
                    this.childrenData.defStatus = true
                    this.$interactive.toast('设置成功')
                } else {
                    this.$interactive.toast('设置失败')
                }
            });
        },
    }
}
</script>

<style lang="scss" scoped>
.menu_bar_box {
    position: relative;
    margin-top: 30rpx;
    background-color: #fff;
    border-radius: 32rpx;
    overflow: hidden;
    color: #333;
    .mine_item_box {
        position: relative;
        padding: 30rpx;
        // border-bottom: 1rpx solid #f5f5f5;
        .item_img {
            width: 96rpx;
            height: 96rpx;
            margin: 4rpx 16rpx 0 0;
        }
        .more_img {
            width: 32rpx;
            height: 32rpx;
            margin-left: 10rpx;
        }
        .curretn_children {
            margin-left: 30rpx;
            font-size: 24rpx;
            color: #fff;
            padding: 8rpx;
            background: #63b9f2;
            border-radius: 8rpx;
        }
        .menu_title {
            font-size: 32rpx;
        }
        .text_999 {
            color: #999;
        }
    }
    .contact_btn {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 120rpx;
        opacity: 0;
    }
}
.childre_name {
    font-size: 48rpx;
    font-weight: bold;
    color: #333;
}
</style>
